<template>
  <view class="container">
    <cu-custom bgColor="bg-gradual-green" :isBack="false">
      <!-- <block slot="backText">返回</block> -->
      <block slot="content"><view class="text-bold">首页</view></block>
    </cu-custom>
	
    <view class="scroll-container">
      <scroll-view :scroll-y="scrollCategories">
        <view>
          <!-- 个人相关导航栏 -->
          <view class="index-bar" v-if="categories.length !== 0">
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue text-shadow">个人相关</text>
                <text class="text-ABC text-blue">Personal</text>
              </view>
            </view>
            <view class="cu-list grid solids-bottom col-4 no-border">
              <view
                class="cu-item"
                v-for="(item, index) in categories"
                :key="index"
                :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
                @click="goCategorieslist"
                :data-mid="item.mid"
              >
                <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
                  <view class="cu-tag badge" v-if="item.count != 0">
                    <block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
                  </view>
                </view>
                <text class="text-bold">{{ item.name }}</text>
              </view>
            </view>
          </view>

          <!-- 系统相关导航栏 -->
          <view class="index-bar" v-if="sysCategories.length !== 0">
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue text-shadow">系统相关</text>
                <text class="text-ABC text-blue">System</text>
              </view>
            </view>
            <view class="cu-list grid solids-bottom col-4 no-border">
              <view
                class="cu-item"
                v-for="(item, index) in sysCategories"
                :key="index"
                :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
                @click="goSysCategorieslist"
                :data-mid="item.mid"
              >
                <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
                  <view class="cu-tag badge" v-if="item.count != 0">
                    <block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
                  </view>
                </view>
                <text class="text-bold">{{ item.name }}</text>
              </view>
            </view>
          </view>

          <!-- 审批相关导航栏 -->
          <view class="index-bar" v-if="permissionCategories.length !== 0">
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue text-shadow">审批流程</text>
                <text class="text-ABC text-blue">Permission</text>
              </view>
            </view>
            <view class="cu-list grid solids-bottom col-4 no-border">
              <view
                class="cu-item"
                v-for="(item, index) in permissionCategories"
                :key="index"
                :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
                @click="goPermissionCategorieslist"
                :data-mid="item.mid"
              >
                <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
                  <view class="cu-tag badge" v-if="item.count != 0">
                    <block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
                  </view>
                </view>
                <text class="text-bold">{{ item.name }}</text>
              </view>
            </view>
          </view>

          <!-- 记录通用相关导航栏 -->
          <view class="index-bar" v-if="recordCategories.length !== 0">
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue text-shadow">记录查看</text>
                <text class="text-ABC text-blue">RECORD</text>
              </view>
            </view>
            <view class="cu-list grid solids-bottom col-4 no-border">
              <view
                class="cu-item"
                v-for="(item, index) in recordCategories"
                :key="index"
                :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
                @click="goRecordCategorieslist"
                :data-mid="item.mid"
              >
                <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
                  <view class="cu-tag badge" v-if="item.count != 0">
                    <block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
                  </view>
                </view>
                <text class="text-bold">{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardCur: 0,
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
    }
  },
  async mounted() {
  },
  props: {
    categories: {
      type: Array,
      default() {
        return []
      }
    },
    sysCategories: {
      type: Array,
      default() {
        return []
      }
    },
    permissionCategories: {
      type: Array,
      default() {
        return []
      }
    },
    recordCategories: {
      type: Array,
      default() {
        return []
      }
    },
    scrollCategories: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  methods: {
    goCategorieslist: function (e) {
      // 如果点击未登录 跳转先进行登录
      // if (!this.$u.utils.isLogin()) return;

      if (e.currentTarget.dataset.mid == 1) {
        // 账单记录
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/account/account'
        })
      } else if (e.currentTarget.dataset.mid == 2) {
        // 账单图表
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/account/account_charts'
        })
      } else if (e.currentTarget.dataset.mid == 3) {
        // 月计划配置
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/account_plan/account_plan'
        })
      } else if (e.currentTarget.dataset.mid == 4) {
        // 和风天气
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/weather/weather'
        })
      } else if (e.currentTarget.dataset.mid == 5) {
        // 红包抽奖
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/luckdraw/luckdraw2'
        })
      } else if (e.currentTarget.dataset.mid == 6) {
        // 翻译
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/translate/translate'
        })
      } else if (e.currentTarget.dataset.mid == 7) {
        // 消息通知
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/message/message'
        })
      } else if (e.currentTarget.dataset.mid == 8) {
        // 密码记录
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/pass/pass'
        })
      }
    },
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },
    goSysCategorieslist: function (e) {
      // 如果点击未登录 跳转先进行登录
      if (!this.$u.utils.isLogin()) return

      if (e.currentTarget.dataset.mid == 1) {
        // 告警记录
        this.$u.route({
          type: 'navigateTo',
          url: 'pages/index/alarm/alarm_record'
        })
      } else if (e.currentTarget.dataset.mid == 2) {
        // 告警图表
        this.$u.route({
          type: 'navigateTo',
          url: 'pages/index/alarm/alarm_charts'
        })
      }
    },
    goPermissionCategorieslist: function (e) {
      // 如果点击未登录 跳转先进行登录
      if (!this.$u.utils.isLogin()) return

      if (e.currentTarget.dataset.mid == 1) {
        // 审批申请
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/permission/submit'
        })
      } else if (e.currentTarget.dataset.mid == 2) {
        // 申请记录
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/permission/apply'
        })
      } else if (e.currentTarget.dataset.mid == 3) {
        // 审批记录
        this.$u.route({
          type: 'navigateTo',
          url: '/pages/index/permission/permission'
        })
      }
    },
    goRecordCategorieslist: function (e) {
		this.$u.toast("小程序不支持查看哦~")
      return
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  // flex-direction: column;
  // height: 100vh;
  // overflow: hidden;

  .index-bar {
    width: 700rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    border-radius: 20rpx;
  }

  .bgImg {
    // position: relative;
    // margin-bottom: 50rpx;
  }
}

.scroll-container {
  // flex: 1;
  overflow: scroll;
}
</style>
